/**
 * 主题变量配置文件
 * 包含亮色和暗色两种主题的所有颜色变量
 */

// 亮色主题
:root {
    // -------- Element Plus 内置变量 --------

    /** 基础背景色 - 白色，用于组件、卡片等基础容器 */
    --el-bg-color: #ffffff;

    /** 浮层背景色 - 白色，用于下拉菜单、弹出框等浮层组件 */
    --el-bg-color-overlay: #ffffff;

    /** 主要文字颜色 - 深灰，用于标题、重要文本 */
    --el-text-color-primary: #303133;

    /** 常规文字颜色 - 灰色，用于正文内容 */
    --el-text-color-regular: #606266;

    /** 次要文字颜色 - 浅灰，用于辅助、提示文本 */
    --el-text-color-secondary: #909399;

    /** 一级边框颜色 - 深边框，用于分割线、边框 */
    --el-border-color: #dcdfe6;

    /** 二级边框颜色 - 中等边框，用于较次要的分割 */
    --el-border-color-light: #e4e7ed;

    /** 三级边框颜色 - 浅边框，用于表格边框等 */
    --el-border-color-lighter: #ebeef5;

    /** 四级边框颜色 - 最浅边框，用于特殊分割需求 */
    --el-border-color-extra-light: #f2f6fc;

    /** 空白填充色 - 纯白，用于纯白背景需求 */
    --el-fill-color-blank: #ffffff;

    /** 基础填充色 - 浅灰白，用于背景填充 */
    --el-fill-color: #f0f2f5;

    /** 浅色填充色 - 更浅的灰白，用于浅色背景 */
    --el-fill-color-light: #f5f7fa;

    /** 更浅填充色 - 近白色，用于hover态背景 */
    --el-fill-color-lighter: #fafafa;

    /** 最浅填充色 - 接近纯白，用于特殊状态 */
    --el-fill-color-extra-light: #fafcff;

    /** 深色填充色 - 深灰白，用于深色背景 */
    --el-fill-color-dark: #ebedf0;

    /** 遮罩层颜色 - 高透明白，用于弹窗遮罩 */
    --el-mask-color: rgba(255, 255, 255, 0.9);

    /** 浅色遮罩层 - 低透明白，用于局部遮罩 */
    --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
   
    // -------- 自定义变量 --------

    /** 页面主体背景色 - 浅灰白，整体页面背景 */
    --bg-color: #f5f7fa;

    /** 通用文本颜色 - 深灰，用于一般文本 */
    --text-color: #303133;

    /** 通用边框颜色 - 浅灰，用于边框分割 */
    --border-color: #ebebeb;

    /** 菜单背景色 - 纯白，用于菜单容器 */
    --menu-bg-color: #ffffff;

    /** 菜单文字颜色 - 深灰，用于菜单项文本 */
    --menu-text-color: #303133;

    /** 菜单激活文字颜色 - 主题色，选中菜单项文本 */
    --menu-active-color: var(--el-color-primary);

    /** 菜单悬浮背景色 - 浅主题色，鼠标悬浮时的背景 */
    --menu-hover-bg-color: var(--el-color-primary-light-9);

    /** 菜单激活背景色 - 浅主题色，选中菜单项背景 */
    --menu-active-bg-color: var(--el-color-primary-light-4);

    /** 头部背景色 - 纯白，用于顶部导航栏 */
    --header-bg-color: none;

    /** 头部文字颜色 - 深灰，用于顶部导航文本 */
    --header-text-color: #303133;

    /** 侧边栏背景色 - 纯白，用于侧边栏容器 */
    --sidebar-bg-color: #ffffff;

    /** 登录页背景色 - 纯白，用于登录页面 */
    --login-bg-color: #ffffff;

    /** 表格头部背景色 - 浅灰白，用于表格表头 */
    --table-header-bg-color: #f5f7fa;

    /** 通用悬浮背景色 - 浅灰白，用于可交互元素悬浮态 */
    --hover-bg-color: #f5f7fa;

    /** 通用阴影 - 浅灰阴影，用于卡片、弹窗等 */
    --box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.3);

    /** 应用最外层背景色 - 浅灰白，整个应用容器背景 */
    --app-bg-color: #fff;

    --box-border-radius: 10px;
}

// 暗色主题
html[data-theme='dark'] {
    // -------- Element Plus 内置变量 --------
    body {
        color:#eee;
        
    }
    transition: all 1.3s ease-out;
    /** 基础背景色 - 深灰，用于组件、卡片等基础容器 */
    --el-bg-color: #1a1a1a;

    /** 表格头部背景色 - 深灰，用于表格表头 */
    --el-table-header-bg-color: var(--el-bg-color) !important;
    /** 浮层背景色 - 深灰，用于下拉菜单、弹出框等浮层组件 */
    --el-bg-color-overlay: #1d1e1f;

    /** 主要文字颜色 - 纯白，用于标题、重要文本 */
    --el-text-color-primary: #ffffff;

    /** 常规文字颜色 - 浅灰白，用于正文内容 */
    --el-text-color-regular: #cfd3dc;

    /** 次要文字颜色 - 灰色，用于辅助、提示文本 */
    --el-text-color-secondary: #a3a6ad;

    /** 一级边框颜色 - 深边框，用于分割线、边框 */
    --el-border-color: #4c4d4f;

    /** 二级边框颜色 - 中等边框，用于较次要的分割 */
    --el-border-color-light: #363637;

    /** 三级边框颜色 - 浅边框，用于表格边框等 */
    --el-border-color-lighter: #2e2e2f;

    /** 四级边框颜色 - 最浅边框，用于特殊分割需求 */
    --el-border-color-extra-light: #262727;

    /** 空白填充色 - 深灰，用于深色背景需求 */
    --el-fill-color-blank: #1a1a1a;

    /** 基础填充色 - 深灰，用于背景填充 */
    --el-fill-color: #262727;

    /** 浅色填充色 - 深灰，用于浅色背景 */
    --el-fill-color-light: #1d1d1d;

    /** 更浅填充色 - 深灰，用于hover态背景 */
    --el-fill-color-lighter: #262727;

    /** 最浅填充色 - 深灰，用于特殊状态 */
    --el-fill-color-extra-light: #2d2d2d;

    /** 深色填充色 - 深灰，用于深色背景 */
    --el-fill-color-dark: #363637;

    /** 遮罩层颜色 - 高透明黑，用于弹窗遮罩 */
    --el-mask-color: rgba(0, 0, 0, 0.9);

    /** 浅色遮罩层 - 低透明黑，用于局部遮罩 */
    --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);

    // -------- 自定义变量 --------

    /** 页面主体背景色 - 深灰，整体页面背景 */
    --bg-color: #202020;

    /** 通用文本颜色 - 纯白，用于一般文本 */
    --text-color: #ffffff;

    /** 通用边框颜色 - 深灰，用于边框分割 */
    --border-color: #4c4d4f;

    /** 菜单背景色 - 深灰，用于菜单容器 */
    --menu-bg-color: #1a1a1a;

    /** 菜单文字颜色 - 浅灰白，用于菜单项文本 */
    --menu-text-color: #cfd3dc;

    /** 菜单激活文字颜色 - 主题色，选中菜单项文本 */
    --menu-active-color: var(--el-color-primary);

    /** 菜单悬浮背景色 - 半透明主题色，鼠标悬浮时的背景 */
    --menu-hover-bg-color: rgba(64, 158, 255, 0.1);

    /** 菜单激活背景色 - 半透明主题色，选中菜单项背景 */
    --menu-active-bg-color: rgba(64, 158, 255, 0.1);

    /** 头部背景色 - 深灰，用于顶部导航栏 */
    --header-bg-color: var(--bg-color);

    /** 头部文字颜色 - 纯白，用于顶部导航文本 */
    --header-text-color: #ffffff;

    /** 侧边栏背景色 - 深灰，用于侧边栏容器 */
    --sidebar-bg-color: #1a1a1a;

    /** 登录页背景色 - 深灰，用于登录页面 */
    --login-bg-color: #1a1a1a;

    /** 表格头部背景色 - 深灰，用于表格表头 */
    --table-header-bg-color: #1d1e1f;

    /** 通用悬浮背景色 - 深灰，用于可交互元素悬浮态 */
    --hover-bg-color: #1d1e1f;

    /** 通用阴影 - 深色阴影，用于卡片、弹窗等 */
    --box-shadow: 0 2px 15px 0 rgba(0, 0, 0);

    /** 应用最外层背景色 - 最深灰，整个应用容器背景 */
    --app-bg-color: #141414;

    --box-border-radius: 10px;
}